<template>
	<view class="box">
		<view>
			<view class="box-one" v-for="(item,index) in list">
				<view class="box-nav">
					<view class="name">申请人: {{item.name}}</view>
					<view class="state">{{item.state}}</view>
				</view>
				<view class="box-two">
					<view class="">
						家属姓名:{{item.family}}
					</view>
					<view class="">
						家属房:{{item.room}}
					</view>
					<view class="">
						申请时间:{{item.time}}
					</view>
					<view class="">
						入住时间:{{item.gotiome}}
					</view>
				</view>
			</view>
		</view>
		<navigator url="/pages/family/family" class="welcome-out">
			<view class="button">
				申请
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '王强',
					family: '王璐',
					room: 'A区3栋3单元301',
					time: '2020-12-08',
					gotiome: '2022-1-09—2022-3-30',
					state:'申请成功'
				}, {
					name: '王强',
					family: '王璐',
					room: 'A区3栋3单元301',
					time: '2020-12-08',
					gotiome: '2022-1-09—2022-3-30',
					state:'申请失败'
				}],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.box {
		background-color: #F5F5F5;
		height: 100vh;
		width: 100%;
		padding-top: 5rpx;
	}

	.box-one {
		width: 94%;
		height: 280rpx;
		/* border: 1rpx solid #ccc; */
		margin-left: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
	.box-nav{
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-bottom: 1rpx dotted #ccc;
		width: 90%;
		height: 55rpx;
		margin-left: 30rpx;
	}
	.name{
		font-weight: bold;
		font-size: 28rpx;
	}
	.state{
		border: 1rpx solid #ccc;
		font-size: 17rpx;
		height: 20rpx;
		padding: 5rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		margin-top: 10rpx;
		text-align: center;  
		line-height: 20rpx;
		background-color: #BFEEAE;
		color: #89C26F;
	}
	.box-two{
		margin-left: 30rpx;
		font-size: 25rpx;
		margin-top: 10rpx;
	}
	.box-two view {
		padding-top: 9rpx;
		color: #6B6B6D;
	}
	.button{
		width: 90%;
		height:80rpx ;
		border: 1rpx solid #ccc;
		position: absolute;
		top: 1100rpx;
		background-color:#3F76EE ;
		color: white;
		border-radius: 60rpx;
		text-align: center;  
		line-height: 40px; 
		margin-left: 30rpx;
	}
</style>
